<template>
  <div>
    <div id="map"
         class="map">
    </div>
  </div>
</template>
<script>

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import { easeIn, easeOut } from 'ol/easing.js';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import OSM from 'ol/source/OSM';
import TileArcGISRest from 'ol/source/TileArcGISRest';
import 'ol/ol.css';



export default {
  data () {
    return {
      map: null
    }
  },
  methods: {

  },
  mounted () {
    var arcgisTileUrl = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
      'Specialty/ESRI_StateCityHighway_USA/MapServer';
    // var istanbul = fromLonLat([28.9744, 41.0128]);
    var center = [-10997148, 4569099];
    var view = new View({
      center: center,
      zoom: 4
    });
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        new TileLayer({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new TileArcGISRest({
            url: arcgisTileUrl
          })
        })
      ],
      // Improve user experience by loading tiles while animating. Will make
      // animations stutter on mobile or slow devices.
      loadTilesWhileAnimating: true,
      view: view
    });
  },
}
</script>
<style lang="sass" scoped>
#map {height: 800px;}
</style>
